
import { Select, Radio, DatePicker } from "antd";
import OrderList from "./OrderList";
import CustomerChart from "../../components/Chart";


import type { DatePickerProps } from "antd";

import { Lineoption, Histogramoption } from "./ChartData";

export default function Yun() {

  const onChange: DatePickerProps["onChange"] = (date, dateString) => {
    console.log(date, dateString);
  };
    return (
        <div className="relative">
            {/* 顶部筛选区域 */}
            <div className="w-[90%] absolute h-16 m-auto left-20 top-5  text-center  bg-white  rounded shadow-sm">
                {/* 品牌 */}
                <Select
                    className="w-35 h-10 ml-25 mt-3 "
                    defaultValue="所有品牌"
                    // onChange={handleChange}
                    options={[
                        { value: '所有品牌', label: '所有品牌' },
                        { value: 'KFC', label: 'KFC' },
                        { value: '麦当劳', label: '麦当劳' }
                    ]}
                />
                {/* 分区 */}
                <Select
                    className="w-35 h-10 ml-5 "
                    defaultValue="默认分区"
                    // onChange={handleChange}
                    options={[
                        { value: '默认分区', label: '默认分区' },
                        { value: 'A区', label: 'A区' },
                        { value: 'B区', label: 'B区' }
                    ]}
                />
                {/* 店铺 */}
                <Select
                    className="w-45 h-10 ml-5"
                    defaultValue="全部店铺"
                    // onChange={handleChange}
                    options={[
                        { value: '全部店铺', label: '全部店铺' },
                        { value: '肯德基总店', label: '肯德基总店' },
                        { value: '麦当劳总店', label: '麦当劳总店' },
                        { value: '肯德基分店', label: '肯德基分店' }
                    ]}
                />
                {/* 来源 */}
                <Select
                    className="w-40 h-10 ml-5"
                    defaultValue="全部来源"
                    // onChange={handleChange}
                    options={[
                        { value: '全部来源', label: '全部来源' },
                        { value: '美团', label: '美团' },
                        { value: '饿了么', label: '饿了么' }
                    ]}
                />
                <button className="w-20 h-9 ml-5 bg-blue-500 text-white rounded hover:bg-blue-600 border-none">
                    筛选
                </button>
            </div>
            {/* 运营数据 */}
            <div className="w-[90%] absolute h-66 m-auto left-20 top-23  bg-white  rounded shadow-sm">
                <h3 className="  pl-5 font-bold color-gray-500">
                    <span>运营数据</span>
                    <span className="float-right mr-5 mt--3">
                        <Radio.Group
                            className="w-60 h-8 "
                            // size="large"
                            defaultValue="a"
                            buttonStyle="solid"
                        >
                            <Radio.Button value="a">今日</Radio.Button>
                            <Radio.Button value="b">近7日</Radio.Button>
                            <Radio.Button value="c">近30日</Radio.Button>
                        </Radio.Group>
                        <DatePicker onChange={onChange} className="w-60 h-10" />
                    </span>
                </h3>
                <hr />
                <div className="w-360 flex justify-between m-auto">
                    <OrderList  />
                </div>
            </div>
            {/* 下单时间分布 */}
            <div className="w-[90%] absolute m-auto top-92  left-20  bg-white rounded-lg shadow-lg">
                <h3 className=" pl-5 font-bold color-gray-500">
                    <span>下单时间分布</span>
                    <span className="float-right mr-5 mt--3">
                        <Radio.Group
                            className="w-60 h-8 "
                            // size="large"
                            defaultValue="a"
                            buttonStyle="solid"
                        >
                            <Radio.Button value="a">今日</Radio.Button>
                            <Radio.Button value="b">昨日</Radio.Button>
                            <Radio.Button value="c">自定义</Radio.Button>
                        </Radio.Group>
                        <DatePicker onChange={onChange} className="w-60 h-10" />
                    </span>
                </h3>
                <p style={{ borderBottom: '2px solid #eee' }}></p>
                <div className="m-auto flex justify-around">
                    <CustomerChart 
                        width={1300}
                        height={400}
                        options={Lineoption}
                        name={'营业趋势分布图'}
                    />
                </div>
            </div>
            {/* 客户下单星期分布 */}
            <div className="w-[90%] absolute m-auto top-210 left-20  mt-2 p-4 bg-white rounded-lg shadow-lg">
                <h3 className=" pl-5 font-bold color-gray-500">
                    <span>下单时间分布</span>
                    <span className="float-right mr-5 mt--3">
                        <Radio.Group
                            className="w-60 h-8 "
                            // size="large"
                            defaultValue="a"
                            buttonStyle="solid"
                        >
                            <Radio.Button value="a">近一周</Radio.Button>
                            <Radio.Button value="b">近二周</Radio.Button>
                            <Radio.Button value="c">近四周</Radio.Button>
                        </Radio.Group>
                        <DatePicker onChange={onChange} className="w-60 h-10" />
                    </span>
                </h3>
                <p style={{ borderBottom: '2px solid #eee' }}></p>
                <div className="w-350 h-100 m-auto flex justify-around ">
                    <CustomerChart
                        name="下单时间分布"
                        width={1200}
                        height={400}
                        options={Histogramoption}

                    />
                </div>
            </div>
        </div>
    )
}
